<script setup lang='ts'>
import {ref} from 'vue'
import axios,{ type AxiosResponse } from 'axios'
import { onMounted } from 'vue';
type BannerList={
  imgUrl:string
}[]
  interface Result{
    coede:string
    msg:string
    result:BannerList
  }
  const list=ref<BannerList>([])
  //获取轮播图数据
  const getBanner=async()=>{
    const res=await axios.get<null,AxiosResponse<Result>>("https://meikou-api.itheima.net/home/banner")
    list.value=res.data.result
  } 
  onMounted(()=>{
    getBanner()
  })
</script>
       
<template>
    <div class="container">
      <!-- 循环生成谁 就在谁的上面写v-for -->
      <img :key="item.imgUrl" v-for="(item,index) in list" :src="item.imgUrl" alt="">
    </div>   
</template>
       
<style scoped>
       .container {
        width: 100%;
        height: 200px;
     }  
     .container img {
        width: 300px;
        height: 100%;
        margin: 10px 20px;
     }     
</style>